<template>
  <div>
    <!-- 搜索栏 -->
    <el-card id="search">
      <el-row>
        <el-col :span="20">
          <el-input v-model="searchModel.APNO" placeholder="航班编号" clearable></el-input>
          <el-button @click="searchShowInfo" type="primary" round icon="el-icon-search">查询</el-button>
          <el-button @click="clearSearch" type="text" icon="el-icon-close"></el-button>
        </el-col>
      </el-row>
    </el-card>
    <!-- 结果列表 -->
    <el-card>
      <el-table :data="showInfoList" stripe style="width: 100%">
        <el-table-column label="#" width="80">
          <template #default="{ $index, row }">
            {{ (currentPage - 1) * pageSize + $index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="apno" label="航班编号" width="120"></el-table-column>
        <el-table-column prop="startStation" label="始发站" width="120"></el-table-column>
        <el-table-column prop="endStation" label="终点站" width="120"></el-table-column>
        <el-table-column prop="enterIn" label="登机口" width="100"></el-table-column>
        <el-table-column prop="enterTime" label="登机时间" width="160">
          <template slot-scope="scope">{{ formatTime(scope.row.enterTime) }}</template>
        </el-table-column>
        <el-table-column prop="departureTime" label="起飞时间" width="160">
          <template slot-scope="scope">{{ formatTime(scope.row.departureTime) }}</template>
        </el-table-column>
        <el-table-column prop="landingTime" label="到达时间" width="160">
          <template slot-scope="scope">{{ formatTime(scope.row.landingTime) }}</template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 分页 -->
    <el-pagination
      v-model="currentPage"
      :page-size="pageSize"
      :total="totalItems"
      @current-change="handlePageChange"
    ></el-pagination>
  </div>
</template>

<script>
import request from '@/utils/request';
import moment from 'moment'; // 导入 moment

export default {
  data() {
    return {
      searchModel: {
        APNO: '',
      },
      showInfoList: [],
      currentPage: 1, // 当前页码
      pageSize: 20, // 每页条数
      totalItems: 0, // 总条数
    };
  },
  mounted() {
    this.getAllShowInfo();
  },
  methods: {
    getAllShowInfo() {
      request({
        url: 'http://localhost:9999/jam/getAll',
        method: 'get',
        params: {
          pageNo: this.currentPage,
          pageSize: this.pageSize,
          APNO: this.searchModel.APNO,
        },
      })
        .then((res) => {
          console.log('获取展示信息成功:', res.data);
          this.showInfoList = res.data.rows; // 修改为 rows
          this.totalItems = res.data.total;
        })
        .catch((error) => {
          console.error('获取展示信息失败:', error);
          console.log(error);
        });
    },

    searchShowInfo() {
      request({
        url: '/jam/research/' + this.searchModel.APNO,
        method: 'get',
      })
        .then((res) => {
          console.log('搜索展示信息成功:', res.data);
          if (res.data.rows && res.data.rows.length > 0) {
            // 如果搜索结果不为空，则更新 showInfoList 和 totalItems
            this.showInfoList = res.data.rows;
            this.totalItems = res.data.total;
          } else {
            // 如果搜索结果为空，显示一个消息，并清空 showInfoList
            this.$message.warning('没有找到匹配的结果');
            this.showInfoList = [];
            this.totalItems = 0;
          }
        })
        .catch((error) => {
          console.error('搜索展示信息失败:', error);
          console.log(error.response);
        });
    },

    clearSearch() {
      this.searchModel.APNO = ''; // 清空输入栏
      this.getAllShowInfo(); // 查询所有页面
    },

    handlePageChange(currentPage) {
      this.currentPage = currentPage;
      this.getAllShowInfo();
    },

    formatTime(time) {
      if (!time) return '';
      return moment(time, 'YYYYMMDDHHmmss').format('YYYY-MM-DD HH:mm:ss');
    },
  },
};
</script>
